$(function () {
  const {form} = layui;
  initArtCateList()

// 获取文章分类的列表
  function initArtCateList() {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        const htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
      }
    })
  }

//  点击添加按钮弹出层
//  绑定点击事件
//  layer.open方法弹出层
  let addIndex = null;
  $(".btnAdd").on('click', () => {

    //调用layer.open打开弹框
    addIndex = layer.open({
      type: 1,
      title: '添加分类',
      area: ['500px', '300px'],
      content: $('#dialog-add').html()
    })
  })
  // 监听表单提交
  $("body").on('submit', '#form-add', function (e) {
    // 阻止默认行为
    e.preventDefault();

    // 提交数据
    $.ajax({
      method: 'POST',
      url: '/my/article/addcates',
      data: $(this).serialize(), // 查询字符串
      success(res) {
        if (res.status !== 0) return layer.msg('提交失败');
        //  提交成功
        layer.msg('提交分类数据成功');
        initArtCateList();
        layer.close(addIndex)
      }
    })
  });

  // 点击编辑按钮弹出编辑弹出层
  let indexEdit = null;
  // 事件代理绑定点击事件 >=>
  $("tbody").on('click', '.btn-edit', function () {

    //调用layer.open打开弹框
    indexEdit = layer.open({
      type: 1,
      title: '修改分类',
      area: ['500px', '300px'],
      content: $('#dialog-edit').html()
    })

    // 获取自定义属性data-id，用于获取当前id对应的数据
    const id = $(this).data('id');
    // console.log(id)
    //  根据id获取对应的数据
    $.ajax({
      method: 'GET',
      url: '/my/article/cates/' + id,
      success(res) {
        console.log(res)
        form.val('form-edit', res.data)
      }
    })
  })
  $('body').on('submit', '#form-edit', function (e) {
    e.preventDefault();
    $.ajax({
      method: 'POST',
      url: '/my/article/updatecate',
      data: $(this).serialize(),
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('更新分类数据失败！');
        }
        layer.msg('更新分类数据成功！');
        layer.close(indexEdit);
        // 重新获取列表数据
        initArtCateList();
      }
    })
  })

  $('tbody').on('click', '.btn-delete', function () {
    // 获取删除按钮的自定义属性data-id(当前数据对应的id值)
    const id = $(this).attr('data-id');
    // 提示用户是否要删除
    layer.confirm('确认删除?', {icon: 3, title: '提示'}, function (index) {
      $.ajax({
        method: 'GET',
        url: '/my/article/deletecate/' + id,
        success(res) {
          if (res.status !== 0) {
            return layer.msg(res.message || '删除失败');
          }
          layer.msg('删除分类成功！');
          layer.close(index);
          initArtCateList();
        }
      })
    })
  })
})
